<template>
  <div class="container">
    <a-card style="width: 100%">
      <div class="filter">
        <div class="form">
          <a-form layout="inline">
            <a-form-item label="班级">
              <ClassSelect v-model:value="classify"></ClassSelect>
            </a-form-item>
          </a-form>
        </div>
        <div class="action-btns">
          <a-space>
            <a-button type="primary" @click="getExamPaperStatistics">查询</a-button>
          </a-space>
        </div>
      </div>
    </a-card>
    <div class="content">
      <a-card style="width: 100%">
        <a-table
          :dataSource="statisticsList"
          :columns="columns"
          :pagination="{ onChange: handlePageChange, total: pageInfo.total }"
        >
        </a-table>
      </a-card>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { fetchExamPaperStatistics } from '@/api/statistics'
import ClassSelect from '@/components/class-select.vue'
import dayjs from 'dayjs'

onMounted(() => {
  getExamPaperStatistics()
})

const classify = ref()
const statisticsList = ref<any[]>([])
const pageInfo = ref({
  page: 1,
  pageSize: 10,
  total: 0
})

const getExamPaperStatistics = async () => {
  const classifyParams = classify.value ?? []
  const params = {
    page_num: pageInfo.value.page,
    page_size: pageInfo.value.pageSize,
    conditions: [
      {
        key: 'categorys',
        operator: 'like',
        value: classifyParams && typeof classifyParams === 'string' ? classifyParams : classifyParams.join(',')
      }
    ],
  }
  const res = await fetchExamPaperStatistics(params)
  statisticsList.value = res.data.data
  pageInfo.value.total = res.data.paging.total
}
const columns = [
  {
    title: '序号',
    align: 'center',
    dataIndex: 'exam_paper_id',
    key: 'exam_paper_id'
  },
  {
    title: '试卷名',
    align: 'center',
    dataIndex: 'exam_paper_name',
    key: 'exam_paper_name'
  },
  {
    title: '考试人数',
    align: 'center',
    dataIndex: 'person_count',
    key: 'person_count'
  },
  {
    title: '通过数量',
    align: 'center',
    dataIndex: 'pass_count',
    key: 'pass_count'
  },
  {
    title: '及格率',
    align: 'center',
    dataIndex: 'pass_rate',
    key: 'pass_rate',
    customRender: (params: any) => {
      return params.record.pass_rate + '%'
    }
  },
  {
    title: '最高分',
    align: 'center',
    dataIndex: 'highest_count',
    key: 'highest_count'
  },
  {
    title: '最低分',
    align: 'center',
    dataIndex: 'lowest_score',
    key: 'lowest_score'
  },
  {
    title: '试卷发布时间',
    align: 'center',
    dataIndex: 'publish_time',
    key: 'publish_time',
    customRender: (params: any) => {
      return dayjs(params.record.publish_time).format('YYYY-MM-DD HH:mm:ss')
    }
  }
]

const handlePageChange = (page: number, pageSize: number) => {
  pageInfo.value.page = page
  pageInfo.value.pageSize = pageSize
  getExamPaperStatistics()
}
</script>

<style scoped lang="scss">
  .filter {
    display: flex;
    justify-content: space-between;
  }
</style>
